﻿<div class="ui-widget-content">
    <h3>Droppable - Introdução</h3>
    <p>
        O droppable transforma elementos HTML em alvos para objetos "draggable".
        O evento <tt>drop</tt> é disparado quando um draggable é "dropado" no droppable. Por exemplo:
    </p>
    <div>
        <span class="draggable_free ui-widget-content" style="padding: 0px">Me arraste por aí.</span>
    </div>
    <div id="droppable_simples1" class="ui-widget-content" style="width: 300px; padding: 5px">
        <p>Solte aqui!</p>
    </div>
    <p>
        Além do evento <tt>drop</tt>, o droppable também tem o evento <tt>out</tt>,
        que é disparado quando o draggable é retirado de dentro do droppable e o evento <tt>over</tt>,
        que é disparado quando o draggable passa por cima do droppable. Veja:
    </p>
    <div id="droppable_simples2" class="ui-widget-content" style="width: 300px; padding: 5px">
        <p>Solte aqui!</p>
    </div>
    <p>Eis como é que se faz isso:</p>
    <p><code class="draggable_troca_cor_code draggable_free">$("#meu_draggable").draggable();</code></p>
    <p>
        <pre id="droppable_troca_cor1">$("#meu_droppable_simples").droppable({
    drop: function(event, ui) { $(this).animate({ backgroundColor: "#80ff80" }); }
});</pre>
    </p>
    <p>
        <pre id="droppable_troca_cor2">$("#meu_outro_droppable").droppable({
    drop: function(event, ui) { $(this).animate({ backgroundColor: "#c0c0ff" }); },
    out: function(event, ui) { $(this).animate({ backgroundColor: "#c0c080" }); }
    over: function(event, ui) { $(this).animate({ backgroundColor: "#ffc0c0" }); }
});</pre>
    </p>
    <script type="text/javascript">
        inicializador.droppableInit = function() {
            $(".draggable_troca_cor_code").disableSelection();
            $("#droppable_simples1").droppable({
                drop: function(event, ui) {
                    $(this).find("p").html("Obrigado por soltar aqui. :)");
                }
            });
            $("#droppable_simples2").droppable({
                drop: function(event, ui) {
                    $(this).find("p").html("Obrigado por soltar aqui. :)");
                },
                out: function(event, ui) {
                    $(this).find("p").html("Ei, não vá embora! Volte aqui! :(");
                },
                over: function(event, ui) {
                    $(this).find("p").html("Solte aqui, por favor!");
                }
            });
            $("#droppable_troca_cor1").droppable({
                drop: function(event, ui) {
                    $(this).animate({ backgroundColor: "#80ff80" });
                }
            });
            $("#droppable_troca_cor2").droppable({
                drop: function(event, ui) {
                    $(this).animate({ backgroundColor: "#c0c0ff" });
                },
                out: function(event, ui) {
                    $(this).animate({ backgroundColor: "#c0c080" });
                },
                over: function(event, ui) {
                    $(this).animate({ backgroundColor: "#ffc0c0" });
                }
            });
        };
    </script>
</div>